<template>
	<view class="contain">
		<view class="form">
			<view class="flex justify-start fcell">
				<view><text class="text-xm">商家名称</text></view>
				<view class="flex justify-center items-center" style="padding-left:15px;">
					<u--input
						placeholder="给店铺起个名称"
						border="none"
						v-model="merchant.name" :customStyle="{'width':'250px'}"></u--input>
				</view>
			</view>
			<view class="flex justify-start fcell">
				<view><text class="text-xm">联系方式</text></view>
				<view class="flex justify-center items-center" style="padding-left:15px;">
					<u--input
						type="number"
						placeholder="填写手机号码"
						border="none"
						v-model="merchant.tel" :customStyle="{'width':'250px'}"></u--input>
				</view>
			</view>
			<view class="flex justify-start fcell">
				<view><text class="text-xm">验证码</text></view>
				<view class="flex justify-center items-center" style="padding-left:15px;">
					<u--input
						type="number"
						placeholder="填写短信验证码"
						border="none"
						v-model="merchant.smscode" :customStyle="{'width':'250px'}"></u--input>
				</view>
			</view>
			<view class="flex justify-between fcell" @click="selectLoc">
				<view><text class="text-xm">商家地址</text></view>
				<view class="flex justify-center items-center">
					<text class="mr-2 gray text-sm">{{merchant.adr}}</text> 
					<view class="relative top-[1px]"><u-icon slot="icon" size="12" color="#999" name="arrow-right"></u-icon></view>
				</view>
			</view>
			<view class="flex justify-between fcell" @click="selectClass">
				<view><text class="text-xm">选择分类</text></view>
				<view class="flex justify-center items-center">
					<text class="mr-2 gray text-sm">{{merchant.class}}</text> 
					<view class="relative top-[1px]"><u-icon slot="icon" size="12" color="#999" name="arrow-right"></u-icon></view>
				</view>
			</view>
			<view class="jieshao">
				<view><text>商家介绍</text></view>
				<view class="mt-2">
					<!--  @blur="getVal" -->
					<u-textarea 
					placeholder="请填写"  
					:placeholderStyle="placeholderstyle"
					:count="true"
					:maxlength="250"
					height="90"
					border="none"
					v-model="merchant.desc"
					style="width:96%;">
					</u-textarea>
				</view>
			</view>
			<!-- 图片上传 -->
			<view class="flex flex-col upload">
				<view><text>店铺Logo</text></view>
				<!-- <view class="img"><image src="https://img2.baidu.com/it/u=3883295116,3325565138&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" mode="aspectFill"></image></view>
				<view class="img"><image src="https://img1.baidu.com/it/u=1199355003,3406713791&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500" mode="aspectFill"></image></view>
				<view class="img"><image src="https://q4.itc.cn/images01/20240327/f9f10ee31cef4508ab9621b7b16f89fc.jpeg" mode="aspectFill"></image></view> -->
				<!-- 大小不能超过512kb -->
				<view class="mt-2">
				<u-upload
						:fileList="uploadLogo.data"
						width="100"
						height="100"
						@afterRead="afterReadLogo"
						@delete="deletePicLogo"
						@oversize="oversize"
						name="1"
						multiple
						:previewFullImage="true"
						maxSize="1024000"
						:maxCount="1"></u-upload>
			   </view>				
			</view>
			<!-- 店铺环境图 -->
			<view class="flex flex-col upload">
				<view><text>店铺环境图(最多5张)</text></view>
				<view class="mt-2">
				<u-upload
						:fileList="uploadFileList.data"
						width="100"
						height="100"
						@afterRead="afterRead"
						@delete="deletePic"
						@oversize="oversize"
						name="1"
						multiple
						:previewFullImage="true"
						maxSize="1024000"
						:maxCount="5"></u-upload>
			   </view>				
			</view>
			<view class="flex price"><u-icon name="error-circle-fill" color="#666" size="15"></u-icon> 入驻费用: 入驻缴纳的费用不能退还</view>
			<view class="flex justify-between fcell" @click="selectMonth">
				<view><text class="text-xm">选择入驻时长</text></view>
				<view class="flex justify-center items-center">
					<text class="mr-2 gray text-sm blod">{{merchant.month}}</text> 
					<view class="relative top-[1px]"><u-icon slot="icon" size="12" color="#999" name="arrow-right"></u-icon></view>
				</view>
			</view>
			<!-- <view class="flex justify-between fcell">
				<view><text class="text-xm">价格</text></view>
				<view class="flex justify-center items-center">
					<text class="mr-2 text-sm text-red-500 blod">{{merchant.price}}元</text> 
					<view class="relative top-[1px]"><u-icon slot="icon" size="12" color="#999" name="arrow-right"></u-icon></view>
				</view>
			</view> -->
			<view class="flex price"><u-icon name="error-circle-fill" color="#666" size="15"></u-icon>入驻时长从审核成功开始计算天数</view>
			
		</view> <!-- form End -->
		
		<view class="submitBtn" @click="sumitJoin">
			<!-- <u-button type="primary" :text="`申请入驻 (需支付${merchant.price}元)`"></u-button> -->
			<u-button type="primary" :text="`更新店铺信息`"></u-button>
		</view>
		
		
		<Login></Login>

		
		
		<!-- 下拉选择 -->
		<u-action-sheet 
		:actions="actlist" 
		:title="acttitle" 
		:show="actshow" 
		:closeOnClickOverlay="true" 
		@select="selectAct"
		@close="closeAct">
		</u-action-sheet>
		
	</view>
</template>

<script setup lang='ts'>
import { ref,reactive } from 'vue'
/* import hex_md5 from 'md5'
import jsrsasign from 'jsrsasign' */
import { onLoad,onShow } from '@dcloudio/uni-app'
import { userStore } from '@/stores/userStore'
let { hasLogin,userData } = userStore();
const store = userStore()

const BASE_URL=import.meta.env.VITE_API_URL; 
const placeholderstyle=reactive({
	fontSize: '13px',
	padding:'20px',
});

let actMode=ref('分类');  //区分下拉选择
let actshow=ref(false);
let acttitle=ref("选择分类");
let actlist=reactive<any>([]);
let uploadLogo=reactive<any>({data:[]});
let uploadFileList=reactive<any>({data:[]});
let textareaVal=ref('');
let realPayMoney=ref(0);

let merchant=reactive<any>({
	name:'',
	tel:'',
	smscode:'',//短信验证码
	adr:'请选择',
	class:'请选择',
	desc:'',
	photo:'',
	month:'请选择',
	price:0,
	lat:0,
	lng:0,
});


onShow(()=>{
	if(!hasLogin){
		console.log("未登录...");
	}
});


const deletePicLogo=(e:any)=>{
	console.log("删除:",e);
	uploadLogo.data.splice(e.index, 1)
}
const afterReadLogo=(e:any)=>{
	let lists = [].concat(e.file);
	lists.map((item:any) => {
		console.log("图片元数据:",item);
		uploadLogo.data.push({
			...item,
			status: '', //uploading
			message: '上传中'
		})
	})
	merchant.photo="图片";
	console.log("上传图片列表uploadLogo:===>",uploadLogo.data[0]);
}


const deletePic=(e:any)=>{
	console.log("删除:",e);
	uploadFileList.data.splice(e.index, 1)
}
const afterRead=(e:any)=>{
	let lists = [].concat(e.file);
	lists.map((item:any) => {
		console.log("图片元数据:",item);
		uploadFileList.data.push({
			...item,
			status: '', //uploading
			message: '上传中'
		})
	})
	merchant.photo="图片";
	console.log("上传图片列表uploadFileList:===>",uploadFileList.data[0]);
}
const oversize=()=>{
	uni.$tools.Toast("文件大小不能超过512Kb")
}

const selectLoc=()=>{
	uni.chooseLocation({
		success:res=>{
			console.log('位置名称：' + res.name);
			console.log('详细地址：' + res.address);
			console.log('纬度：' + res.latitude);
			console.log('经度：' + res.longitude);
			if(res.address!=""){
				merchant.adr=res.address+"/"+res.name
			}
			merchant.lat=res.latitude;
			merchant.lng=res.longitude;
			console.log(merchant);
		},
		fail:err=>{
			console.log("选择错误",err);
		}
	});
}

const selectAct=(e:any)=>{
	console.log("选择",e);
	if(actMode.value==='分类'){
		merchant.class=e.name;
	}
	if(actMode.value==='入驻'){
		merchant.month=e.name;
		merchant.price=e.subname.replace("元/月","");
		realPayMoney.value=parseInt(e.subname.replace("元/月",""))*100; //入驻价格
	}
}

const closeAct=()=>{
	actshow.value=false;
}

const selectClass=()=>{
	actMode.value="分类";
	actlist=reactive<any>([
		{name:'饮食/美食'},
		{name:'休闲娱乐/KTV'},
		{name:'休闲娱乐/按摩沐足'},
		{name:'医学美容/医疗美容'},
		{name:'加油站'}
	]);
	actshow.value=true;
}


// const getVal=(e:any)=>{
// 	console.log("111",e);
// 	console.log("222",textareaVal.value);
// }

const selectMonth=()=>{
	actMode.value="入驻";
	actlist=reactive<any>([
		{name:'3个月',subname:'600元/月'}, //198
		{name:'6个月',subname:'500元/月'},
		{name:'12个月',subname:'300元/月'},
	]);
	acttitle.value="选择入驻时长";
	actshow.value=true;	
}


const sumitJoin=()=>{
	uni.$tools.Toast("店铺信息已更新")
}









/*商家商家图片*/
const uploadMerchantImage=(orderNo:String)=>{
		console.log(uploadFileList.data[0].url);
		uni.uploadFile({
			url: BASE_URL+'/common/MerchantOssUploadImage', //仅为示例，非真实的接口地址
			filePath: uploadFileList.data[0].url,
			name: 'file',
			header: {
				'Authorization':uni.getStorageSync("token") || null,
				'productNo': orderNo
			},
			success: (res) => {
				console.log("图片上传结果:",res);
			},
			fail:err=>{
				console.log("图片上传失败:",err);
			}
		});	
}

</script>

<style lang='scss' scoped>
	@import "shop_merchant.scss";
</style>